<template lang="pug">
MenuPage
.GameItemDetail
    .game_flex_column
        .game_header
            .game_name {{gi?.name}}
            img(:src="gi?.header_image")
            .game_header_column
                .game_header_short {{gi?.short_description}}
                .game_header_info(v-for="(item,index) in game_header_info_list" :key="index") {{item.msg}}
                    label {{item.data}}
        .game_user_op
            .game_movie(v-if="gi?.movies")
                MovieBar(:movies="gi?.movies")
            .game_price
                .game_name_link
                    a(:href="gi?.website ? gi?.website :'#/game/'+gi?.steam_appid" target="_blank")  👉🏻 {{gi?.name}}
                    div(@click="ClickToShare")
                        svg.icon( p-id="2903" t="1684311068328" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg")
                            path( d="M853.333333 533.333333a32 32 0 0 1 64 0v266.666667c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V256c0-64.8 52.533333-117.333333 117.333333-117.333333h277.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v544a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V533.333333z m-42.058666-277.333333l-89.792-95.402667a32 32 0 0 1 46.613333-43.861333l140.544 149.333333C927.861333 286.485333 913.376 320 885.333333 320H724.704C643.029333 320 576 391.210667 576 480v192a32 32 0 1 1-64 0V480c0-123.296 94.784-224 212.704-224h86.570667z"
                                p-id="2904"
                            )
                .game_own_state
                    span.loginButton(v-show="!loginState.Get()" @click="()=>{router.push('/login')}") Sign In
                    .game_is_disabled(v-show="gi?.disable" ) This Game Is Disabled
                    .game_purchase_discount(v-show="!gi?.disable" )
                        .game_purchase_discount_bg(v-if="!gi?.is_free" )
                            .discount_pct -{{gi?.price_overview?.discount_percent}}%
                            .discount_prices
                                .game_price_init {{gi?.price_overview?.initial}}
                                .game_price_final {{gi?.price_overview?.final}}
                            .addToWishlistBtn(@click="AddToWishList") AddToWishList
                            .inWishList(v-show="isWishHaveThisGame" )
                                span ✔
                        .game_purchase_discount_bg(v-if="gi?.is_free" )
                            .discount_free Free
                            .addToWishlistBtn(@click="AddToWishList") AddToWishList
                            .inWishList(v-show="isWishHaveThisGame" )
                                span ✔
                .game_you_have(v-if="isHaveThisGame")
                    .game_have_name(@click="ToUserDetails") You already own the game  ✔

        .game_page_content
            .game_about_the_game
                .title About The Game
                div(v-html="gi?.about_the_game" )
            .game_content_center
                .game_reviews
                    .title Game Reviews
                    div(v-html="gi?.reviews" )
                .legal_notice
                    .title Legal Notice
                    div(v-html="gi?.legal_notice" )



            .game_content_right
                .achievements
                    .title Achievements
                    .achievement_img
                        img(v-for="(item,index) in gi?.achievements.highlighted.slice(0,10)" :src="item.path" :title="item.name")

                .game_languages
                    table Platforms
                        tr
                            th
                            th windows
                            th mac
                            th linux
                        tr
                            td
                            td
                                span(v-if="gi?.platforms.windows") ✔
                            td
                                span(v-if="gi?.platforms.mac") ✔
                            td
                                span(v-if="gi?.platforms.linux") ✔


                .game_languages
                    table Languages
                        tr
                            th
                            th Interface
                            th Full Audio
                            th Subtitles
                        tr(v-for="(value,key) in gi?.languages" :key="key")
                            td  {{key}}
                            td
                                span(v-if="value?.interface") ✔
                            td
                                span(v-if="value?.fullAudio") ✔
                            td
                                span(v-if="value?.subtitles") ✔


</template>

<script setup lang="ts">


    import {defineAsyncComponent, onBeforeMount, onMounted, ref} from "vue";
    import {StoreLoginState, StoreUserDetail} from "../../../store/userInfo";
    import {useRoute, useRouter} from "vue-router";
    import type {Achievements, GameObj} from "../../../utils/types/Game";
    import {LogSuccess} from "../../../utils/notification/Index";
    import type {ResultInfo} from "../../../utils/types/ResultInfo";
    import {GameInfoById} from "../../../reqApi/Game";
    import MenuPage from "../MenuPage.vue";
    import {UserWishListAdd} from "../../../reqApi/UserCart";

    const MovieBar = defineAsyncComponent(() =>
        import('../MovieBar.vue')
    )

    const userDetail = StoreUserDetail();
    const router = useRouter();
    const route = useRoute();
    const loginState = StoreLoginState();
    // 已经拥有该游戏
    const isHaveThisGame = ref(false)
    const isWishHaveThisGame = ref(false)

    const props = defineProps(
        {appid: String});

    const gi = ref<GameObj>()
    let game_header_info_list: { msg: String, data: String | undefined }[] = []
    const game_achievements = ref<Achievements>()
    const game_header_fun = () => {
        game_header_info_list = [
            {msg: "PUBLISHER", data: gi?.value?.publishers[0]},
            {msg: "DEVELOPER", data: gi?.value?.developers[0]},
            {msg: "RELEASE DATE", data: gi?.value?.release_date.coming_soon ? "" : gi?.value?.release_date?.date},
            {msg: "RECENT REVIEWS", data: String(gi?.value?.recommendations?.total)},
        ]
        game_achievements.value = gi?.value?.achievements
    }
    const ClickToShare = () => {
        if (navigator.clipboard) {
            navigator.clipboard.writeText('copy content')
        } else {
            var textarea = document.createElement('textarea');
            document.body.appendChild(textarea);
            // 隐藏此输入框
            textarea.style.position = 'fixed';
            textarea.style.clip = 'rect(0 0 0 0)';
            textarea.style.top = '10px';
            // 赋值
            textarea.value = window.location.href;
            // 选中
            textarea.select();
            // 复制
            document.execCommand('copy', true);
            alert("Copy Success")
            // 移除输入框
            document.body.removeChild(textarea);
        }
    }
    // ------------------------

    const ToUserDetails = () => {
        router.push("/user")
    };


    const AddToWishList = () => {
        // 未登录
        if (!loginState.Get()) {
            router.push("/login")
            return
        }
        // 愿望单未有该游戏
        if (isWishHaveThisGame.value) {
            LogSuccess("isWishHaveThisGame ");
            return
        }
        let steamAppid = Number(props.appid)
        UserWishListAdd({
            app_ids: [steamAppid,]
        }).then(resp => {
            const result = resp.data as ResultInfo<any>;
            LogSuccess(result.success)
        });
        router.go(0);


    }

    const InitGameInfo = () => {
        GameInfoById(
            {
                app_id: Number(props.appid),
            }
        ).then(resp => {
            const result = resp.data as ResultInfo<GameObj>;
            if (result.success) {
                gi.value = result.data;
                game_header_fun()
            }
        })

    }
    onBeforeMount(() => {
        InitGameInfo()
        console.log(' onBeforeMount',);

    })

    onMounted(() => {
            let steamAppid = Number(props.appid);
            if (loginState.Get()) {
                userDetail.Flush()
                setTimeout(() => {
                    let game_ids = userDetail.Get().value?.game_ids;
                    if (game_ids != undefined && game_ids[steamAppid as unknown as keyof typeof wishList]) {
                        isHaveThisGame.value = true
                    }
                    let wishList = userDetail.Get().value?.wish_list;
                    // obj[str as keyof typeof obj]
                    if (wishList != undefined && wishList[steamAppid as unknown as keyof typeof wishList]) {
                        console.log(props.appid)
                        console.log(wishList[steamAppid as unknown as keyof typeof wishList])
                        isWishHaveThisGame.value = true;
                    }

                }, 400)
            }

        }
    )

</script>


<style lang="sass">
@import "../../../assets/sass/game/gameDetails"

</style>
